﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
}
    <div class="container-div" id="mesThreedCoordinates-vue">
        <!-- 条件搜索区 -->
        <div style="margin-bottom:20px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-select placeholder="请选择查询批次" v-model="checkProductBatch">
                        <el-option v-for="item in productBatchTable"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" v-on:click="search()">查询</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" :offset="20">
                    <el-button type="danger" v-on:click="createExcel()">导出Excel</el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 总览表格 -->
        <div>
            <el-table :data="infoTable"
                      style="width: 100%"
                      border>
                <el-table-column type="index"
                                 label="序号">
                </el-table-column>
                <el-table-column prop="ProductBatch"
                                 label="产品批号">
                </el-table-column>
                <el-table-column prop="MaterialCode"
                                 label="产品编号">
                </el-table-column>
                <el-table-column prop="Result"
                                 :filters="[{text:'合格',value:'合格'},{text:'不合格',value:'不合格'}]"
                                :filter-method="filterPriority"
                                 label="结果">
                    <template slot-scope="scope"
                              >
                        <el-tag :type="resultFormatter(scope.row.Result)">
                            {{scope.row.Result}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="Param_1"
                                 label="外圆直径">
                </el-table-column>
                <el-table-column prop="Param_2"
                                 label="总长">
                </el-table-column>
                <el-table-column prop="Param_3"
                                 label="内型深度">
                </el-table-column>
                <el-table-column prop="Param_4"
                                 label="锥孔深度">
                </el-table-column>
                <el-table-column prop="Param_5"
                                 label="内腔直径">
                </el-table-column>
                <el-table-column prop="Param_6"
                                 label="内孔直径_1">
                </el-table-column>
                <el-table-column prop="Param_7"
                                 label="内孔直径_2">
                </el-table-column>
                <el-table-column prop="Param_8"
                                 label="内孔直径_3">
                </el-table-column>
                <el-table-column prop="Param_9"
                                 label="内孔位置尺寸_1">
                </el-table-column>
                <el-table-column prop="Param_10"
                                 label="内孔位置尺寸_2">
                </el-table-column>
                <el-table-column prop="Param_11"
                                 label="内孔位置尺寸_3">
                </el-table-column>
                <el-table-column prop="Param_12"
                                 label="梯形槽内径">
                </el-table-column>
                <el-table-column prop="Param_13"
                                 label="外螺纹位置尺寸">
                </el-table-column>
                <el-table-column prop="Param_14"
                                 label="退刀槽直径">
                </el-table-column>
                <el-table-column prop="Param_15"
                                 label="退刀槽宽度">
                </el-table-column>
                <el-table-column prop="Param_16"
                                 label="浅孔深度">
                </el-table-column>
                <el-table-column prop="Param_17"
                                 label="内控对外圆同轴度_1">
                </el-table-column>
                <el-table-column prop="Param_18"
                                 label="内控对外圆同轴度_2">
                </el-table-column>
                <el-table-column prop="Param_19"
                                 label="端面对外圆垂直度">
                </el-table-column>
                <el-table-column prop="Param_20"
                                 label="外螺纹对外圆同轴度">
                </el-table-column>
                <el-table-column prop="Param_21"
                                 label="内螺纹对外圆同轴度">
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页区 -->
        <div>
            <div style="margin:50px 30px;margin-top:20px;">
                <el-pagination background
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total" v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                               :current-page="pageSize" :page-sizes="[5,10,20]" :page-size="limit">
                </el-pagination>
            </div>
        </div>
        <!-- 隐藏域，生成excel时弹出，用户填写基本信息 -->
        <el-dialog title="请确认基本信息" :visible.sync="dialogFormVisible">
            <el-form :model="excelBasic">
                <el-form-item label="产品代号" :label-width="formLabelWidth">
                    <el-input v-model="excelBasic.productCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品名称" :label-width="formLabelWidth">
                    <el-input v-model="excelBasic.productName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工序号" :label-width="formLabelWidth">
                    <el-input v-model="excelBasic.workCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工序名称" :label-width="formLabelWidth">
                    <el-input v-model="excelBasic.workName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产线内工序号" :label-width="formLabelWidth">
                    <el-input v-model="excelBasic.InsertWorkCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产线内工序名称" :label-width="formLabelWidth">
                    <el-input v-model="excelBasic.InsertWorkName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="excelBasicCheck()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

    <script>
    let app = new Vue({
        el: '#mesThreedCoordinates-vue',
        data: {
            checkProductBatch: null,
            productBatchTable: [],
            infoTable: [],
            pageSize: 1,  // 当前页码
            limit: 5,  //每页数据条数
            total: 0,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            excelBasic: {
                productCode: "默认值待定",
                productName: "默认值待定",
                workCode: "默认值待定",
                workName: "默认值待定",
                InsertWorkCode: "默认值待定",
                InsertWorkName:"默认值待定"
            },
            targetDer:"C:\\Users\\42199\\Desktop"
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = 1;
                this.limit = val;
                this.search();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageSize = val;
                this.search();
            },
            // 获取产品批次
            getProductBatch() {
                let url = '@Url.Content("~/ReportManage/ReportApi/getProductBatch")'
                axios.get(url).then(res => {
                    let data = res.data.result;
                    this.productBatchTable = [];
                    for (let i = 0; i < data.length; i++) {
                        this.productBatchTable.push({
                            label: data[i].ProductBatch,
                            value: data[i].ProductBatch
                        })
                    }
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '获取产品批次失败!'+err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 根据产品批次查询
            search() {
                if (this.checkProductBatch == null || this.checkProductBatch == "") {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '请先选择要查询的批次!',
                        type: 'info',
                        offset: 80
                    })
                } else {
                    let url = '@Url.Content("~/ReportManage/ReportApi/getInfoRecord")'
                    axios.get(url, {
                        params: {
                            productBatch: this.checkProductBatch,
                            pageSize: this.pageSize,
                            limit: this.limit
                        }
                    }).then(res => {
                        this.total = res.data.total;
                        let data = res.data.result;
                        this.infoTable = [];
                        for (let i = 0; i < data.length; i++) {
                            this.infoTable.push({
                                ProductBatch: data[i].ProductBatch,
                                MaterialCode: data[i].MaterialCode,
                                Param_1: data[i].Param_1,
                                Param_2: data[i].Param_2,
                                Param_3: data[i].Param_3,
                                Param_4: data[i].Param_4,
                                Param_5: data[i].Param_5,
                                Param_6: data[i].Param_6,
                                Param_7: data[i].Param_7,
                                Param_8: data[i].Param_8,
                                Param_9: data[i].Param_9,
                                Param_10: data[i].Param_10,
                                Param_11: data[i].Param_11,
                                Param_12: data[i].Param_12,
                                Param_13: data[i].Param_13,
                                Param_14: data[i].Param_14,
                                Param_15: data[i].Param_15,
                                Param_16: data[i].Param_16,
                                Param_17: data[i].Param_17,
                                Param_18: data[i].Param_18,
                                Param_19: data[i].Param_19,
                                Param_20: data[i].Param_20,
                                Param_21: data[i].Param_21,
                                Result: data[i].Result
                            })
                        }
                    }).catch(err => {
                        this.$message({
                            showClose: true,
                            duration: 2500,
                            message: '查询出错！'+err,
                            type: 'error',
                            offset: 80
                        })
                    })
                }
            },
            // 填写基本信息
            createExcel() {
                // 填写基本信息
                this.dialogFormVisible = true;
            },
            // 导出excel
            excelBasicCheck() {
                this.dialogFormVisible = false;
                // 导出excel
                let url = '@Url.Content("~/ReportManage/ReportApi/createMesExcel")'
                axios.get(url, {
                    params: {
                        targetDer: this.targetDer,
                        productBatch: this.checkProductBatch,
                        productCode: this.excelBasic.productCode,
                        productName: this.excelBasic.productName,
                        workCode: this.excelBasic.workCode,
                        workName: this.excelBasic.workName,
                        InsertWorkCode: this.excelBasic.InsertWorkCode,
                        InsertWorkName: this.excelBasic.InsertWorkName
                    }
                }).then(res => {
                    if (res.data.result) {
                        this.$notify({
                            title: 'Success',
                            message: "Excel导出成功",
                            duration: 2000,
                            type: 'success'
                        })
                    }
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！生成Excel错误：' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 误差数据结果类型过滤
            resultFormatter(data) {
                let result = "info"
                if (data == "合格") {
                    result = "success";
                } else {
                    result = "danger";
                }
                return result;
            },
            // 合格不合格筛选
            filterPriority(value, row) {
                return row.Result == value
            },
        },
        filters: {
        },
        mounted() {
            this.getProductBatch();
        }
    })
    </script>

